<template>
    <NetworkError v-if="state.networkErrorShow" @tautology="() => getData(true)" />
    <template v-else>
        <u-loading-page :loading="state.loading" fontSize="14" iconSize="30" />
        <view v-if="state.loading === false" class="center-content">
            <view class="center-info">
                <view class="center-per">
                    <image
                        :src="state.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png')"
                        class="center-photo"></image>
                    <view class="center-basic">
                        <view>
                            <text class="center-name">{{ state.nickname }}</text>
                            <text class="center-id">（我的ID：{{ state.userNo }}）</text>
                        </view>
                        <view v-if="state?.inviteInfo?.userNo">
                            <text class="center-invite">邀请人：{{ state.inviteInfo.name }}</text>
                            <text class="center-id">（邀请人ID：{{ state.inviteInfo.userNo }}）</text>
                        </view>
                        <view v-else>
                            <text class="center-invite">邀请人：总部</text>
                        </view>
                    </view>
                </view>
                <view class="center-level">
                    <view class="level-row">
                        <view class="level-num">
                            <text>当前等级：{{ state.levelName || '--' }}</text>
                        </view>
                        <view class="level-center level-num" @click="router.push('/pages-user/level/index')">
                            <text>等级中心</text>
                            <image :src="getImgOssUrl('/ui-prod-2.8.0/jintou.png')" class="level-go"></image>
                        </view>
                    </view>
                    <view class="level-tips" v-if="state.highLevel == 1"> 您已升至最高级</view>

                    <view class="level-tips" v-else>
                        <template>
                            <template v-if="state.nextLevelData.addToPlug">
                                <template v-if="floatDivide(state.addToPlug, 100) > 0">
                                    推广金额还差<text class="level-count">{{ floatDivide(state.addToPlug, 100) }}</text
                                    >元,
                                </template>
                                <template v-if="floatDivide(state.addToPlug, 100) <= 0">
                                    累计推广金额<text class="level-count">已达标</text>,
                                </template>
                            </template>
                            <template v-if="state.nextLevelData.bindFansNum">
                                <template v-if="floatDivide(state.bindFansNum, 100) > 0">
                                    粉丝还差<text class="level-count">{{ state.bindFansNum }}</text
                                    >个,
                                </template>
                                <template v-if="floatDivide(state.bindFansNum, 100) <= 0">
                                    累计绑定粉丝<text class="level-count">已达标</text>,
                                </template>
                            </template>
                            <template v-if="state.nextLevelData.inviteDtbNum">
                                <template v-if="floatDivide(state.inviteDtbNum, 100) > 0">
                                    邀请分销员还差<text class="level-count">{{ state.inviteDtbNum }}</text
                                    >个,
                                </template>
                                <template v-if="floatDivide(state.inviteDtbNum, 100) <= 0">
                                    累计邀请分销员<text class="level-count">已达标</text>,
                                </template>
                            </template>
                            即可升级到<text class="level-count">{{ state.nextLevelName }}</text>
                        </template>
                    </view>
                </view>
            </view>
            <view class="center-detail">
                <view class="center-space center-item new_center_item">
                    <view
                        class="center-col new_center_col"
                        @click="jumpto(0, '/pages-user/distributi/distributiPage/income')">
                        <view class="center-point">
                            今日收益{{ state.levelCenter?.benefitMode == 1 ? '(积分)' : '(元)' }}
                        </view>
                        <view class="center-pointnum">{{ floatDivide(state.levelCenter?.toDayProfit, 100) }}</view>
                    </view>
                    <view
                        class="center-col new_center_col"
                        @click="jumpto(2, '/pages-user/distributi/distributiPage/income')">
                        <view class="center-point">
                            累计收益{{ state.levelCenter?.benefitMode == 1 ? '(积分)' : '(元)' }}
                        </view>
                        <view class="center-pointnum">{{ floatDivide(state.levelCenter?.cumulativeProfit, 100) }}</view>
                    </view>
                    <view
                        class="center-col new_center_col"
                        @click="jumpto(2, '/pages-user/distributi/distributiPage/income')">
                        <view class="center-point">
                            待结算收益{{ state.levelCenter?.benefitMode == 1 ? '(积分)' : '(元)' }}
                        </view>
                        <view class="center-pointnum">{{ floatDivide(state.levelCenter?.toBeSettled, 100) }}</view>
                    </view>
                </view>
                <view class="center-space center-item new_center_item">
                    <view
                        class="center-col new_center_col"
                        @click="jumpto(0, '/pages-user/distributi/distributiPage/achievement')">
                        <view class="center-point">今日业绩(元)</view>
                        <view class="center-pointnum">{{ floatDivide(state.levelCenter?.toDayPerformance, 100) }}</view>
                    </view>
                    <view
                        class="center-col new_center_col"
                        @click="jumpto(1, '/pages-user/distributi/distributiPage/achievement')">
                        <view class="center-point">本月业绩(元)</view>
                        <view class="center-pointnum">{{ floatDivide(state.levelCenter?.monthPerformance, 100) }}</view>
                    </view>
                    <view
                        class="center-col new_center_col"
                        @click="jumpto(2, '/pages-user/distributi/distributiPage/achievement')">
                        <view class="center-point">累计业绩(元)</view>
                        <view class="center-pointnum">{{
                            floatDivide(state.levelCenter?.cumulativePerformance, 100)
                        }}</view>
                    </view>
                </view>
                <view class="center-space center-item center-fans new_style">
                    <view
                        class="center-col center-width"
                        @click="jumpto('', '/pages-user/distributi/distributiPage/myfans')">
                        <view class="center-point center-between">
                            <text class="fz28">我的粉丝</text>
                            <image :src="getImgOssUrl('/ui-prod-2.8.0/white-jiantou.png')" class="fans-go"></image>
                        </view>
                        <view class="center-fannum">{{ state.levelCenter?.fansNum }}人</view>
                    </view>
                    <view class="center-line"></view>
                    <view
                        class="center-col center-width"
                        @click="jumpto('', '/pages-user/distributi/distributiPage/invite')">
                        <view class="center-point center-between">
                            <text class="fz28">我的邀请</text>
                            <image :src="getImgOssUrl('/ui-prod-2.8.0/white-jiantou.png')" class="fans-go"></image>
                        </view>
                        <view class="center-fannum">{{ state.levelCenter?.inviteNum }}人</view>
                    </view>
                </view>
                <view class="center-space center-item">
                    <view
                        class="center-col center-align"
                        @click="router.push('/pages-user/distributi/promoteGoods/index')">
                        <image class="center-icon" :src="getImgOssUrl('/ui-prod-2.8.0/send.png')"></image>
                        <view class="center-pointnum_btn">推广商品</view>
                    </view>
                    <!-- 分销员模块有后台控制是否展示 -->
                    <view
                        class="center-col center-align"
                        v-if="state.levelCenter.inviteSwitch == 2"
                        @click="router.push('/pages-user/distributi/distributiInvite/index')">
                        <image class="center-icon" :src="getImgOssUrl('/ui-prod-2.8.0/member.png')"></image>
                        <view class="center-pointnum_btn">邀请{{ state.dtbname }}</view>
                    </view>
                    <view class="center-col center-align" @click="router.push('/pages-user/upgrade/index')">
                        <image class="center-icon" :src="getImgOssUrl('/ui-prod-2.8.0/up.png')"></image>
                        <view class="center-pointnum_btn">我要升级</view>
                    </view>
                    <view
                        class="center-col center-align"
                        @click="wechatRef.openPopup()"
                        v-if="state.levelCenter?.qyInfo?.qySwitch == 2">
                        <image class="center-icon" :src="getImgOssUrl('/ui-prod-2.8.0/company.png')"></image>
                        <view class="center-pointnum_btn">加企微</view>
                    </view>
                </view>
            </view>
            <weChatPopup
                :imgSrc="state.levelCenter?.qyInfo?.qyQrcode"
                :title="state.levelCenter?.qyInfo?.qyName"
                ref="wechatRef" />
        </view>
    </template>
</template>
<script setup>
import NetworkError from '@/components/networkError';
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import weChatPopup from '@/components/weChatPopup';
import router from '@/router';
import request from '@/request';
import storage from '@/commons/storage';

import { getImgOssUrl, floatDivide } from '@/commons/utils';
const wechatRef = ref();
const state = reactive({
    loading: true,
    networkErrorShow: false,
    nickname: '', //昵称
    avatar: '', //头像
    userNo: '', //用户编号
    levelName: '', //当前等级名称
    nextLevelName: '', //下一等级名称
    highLevel: '', //是最高级1是最高级
    inviteInfo: {},
    levelCenter: {},
    modelValue: false,
    dtbname: '',
    addToPlug: '',
    bindFansNum: '',
    inviteDtbNum: '',
    nextLevelData: {
        addToPlug: '',
        bindFansNum: '',
        inviteDtbNum: ''
    }
});

/**
 * 设置navBar 名称
 */
const onSetNav = title => uni.setNavigationBarTitle({ title });

const jumpto = (type, url) => {
    if (!type && type != 0) {
        router.push(url);
    } else {
        router.push(url + '?num=' + type);
    }
};
state.dtbname = storage.get('dtbName');
onSetNav(state.dtbname + '中心');

/**
 * 获取接口数据
 */
const getData = async loading => {
    state.networkErrorShow = false;
    // 首次进入页面 或 请求失败 loading
    if (loading) state.loading = true;
    request('dtbCenterServ')
        .then(res => {
            if (res.code === 0) {
                state.loading = false;
                Object.assign(state, res.data);
                if (state.highLevel == 1) return;
                const data = state.levelCenter.levelRule.find(item => item.id == state.levelCenter.nextLevelId) || {};
                data.upgradeConfig = data.upgradeConfig || {};
                state.nextLevelData.addToPlug = data.upgradeConfig.addToPlug;
                state.nextLevelData.bindFansNum = data.upgradeConfig.bindFansNum;
                state.nextLevelData.inviteDtbNum = data.upgradeConfig.inviteDtbNum;
                state.addToPlug = data.upgradeConfig.addToPlug - state.levelCenter?.upgradeCondition?.addToPlug;
                state.bindFansNum = data.upgradeConfig.bindFansNum - state.levelCenter?.upgradeCondition?.bindFansNum;
                state.inviteDtbNum =
                    data.upgradeConfig.inviteDtbNum - state.levelCenter?.upgradeCondition?.inviteDtbNum;
            } else {
                state.loading = false;
                state.networkErrorShow = true;
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                });
            }
        })
        .catch(() => {
            state.loading = false;
            state.networkErrorShow = true;
        });
};

onShow(() => {
    getData(false);
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
